DOM

DOM 全名 Document Object Model（文件物件模型）。

它是一種「把 HTML 文件轉換成可以用程式操控的物件結構(樹狀的資料結構)」的方式。

什麼是DOM?

DOM（Document Object Model）在前端開發中是指「文件物件模型」。簡單來說，DOM 是一種讓瀏覽器能夠理解並操作 HTML 文件結構的方式。DOM是一個樹狀結構，代表著網頁中的各個部分（標籤、屬性、文字等），而 JavaScript 可以用這個結構來改變網頁內容和樣式。

想像 DOM 就像一顆樹，每個元素都是這棵樹的節點。網頁的每個部分（例如 <div>, <p>, <h1>, <button> 等等）都是這棵樹上的一個「節點」或「葉子」，而這些節點都可以被 JavaScript 讀取、修改或刪除。

這樣的操作不會刷新頁面，使用者會感覺到網頁在「動態」變化。DOM 就是網頁的「內部結構」，JavaScript 是改變這個結構的「工具」。

• 把 HTML 想像成「蓋房子的設計圖」（寫死的文字）。
• DOM 就是「蓋好後的房子裡的東西」，每個房間、家具都可以被搬動、換顏色。
• JavaScript 就像「房子的主人」，可以改變牆壁顏色（CSS）、新增家具（元素）、刪掉東西。

早期的前端工程，都是html寫好之後dom要重新渲染一次，但隨著網路越來越發達，互動越來越多的網站，要整個重新渲染一次DOM太浪費成本，所以開始採用Virtual DOM (虛擬DOM)

React: Virtual DOM

React的背後核心運作 → Virtual Dom，會根據畫面需求建立草稿，再由react(前端框架)轉換成瀏覽器看得懂的DOM。

而 Virtual DOM 的運作原理就是透過 新舊Virtual Dom比較，找出差異，讓瀏覽只需要渲染差異的**節點(element)**就好。

範例:

當你透過 React.createElement() 建立物件時，react會回傳成一個 JS 物件

• 範例

  早期的react是這樣寫的。

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  
  // 用 React.createElement 建立虛擬 DOM 物件
  const reactElement = React.createElement(
    'div',
    { className: 'wrapper' },
    React.createElement('h1', null, 'Hello React.createElement!'),
    React.createElement('p', null, '這是不用 JSX，而是直接用函式建立的元素。')
  );
  
  const root = ReactDOM.createRoot(
    document.getElementById('root-container')
  );
  
  root.render(reactElement);
  

React: 語法糖

React的底層語言就是JS，透過在JS中呼叫 React.createElement() 建立物件回傳物件實現渲染。

但這樣既不直覺又很複雜易出錯，所以出現了 語法糖 - JSX 。

<h1>Hi</h1>
// 轉譯後會變成 ↓
React.createElement('h1', null, 'Hi')

就是一個範例。

整個前端工程運作原理

1. 你用 JSX語法（長得佷像 HTML）寫在index.jsx
2. build 時由 SWC（轉譯器）把 JSX 轉譯成 _jsx() / React.createElement() 呼叫；
3. React 呼叫元件產生 Virtual DOM，這一步叫 render。

SWC (Speedy Web Compiler) 是一個以 Rust 編寫的超高速 JavaScript 與 TypeScript 編譯器與轉譯器，能夠將現代 JavaScript/TypeScript 語法轉換為相容於舊版瀏覽器的程式碼。

• 先用 新的 Virtual DOM 跟 舊的 Virtual DOM 做比較。
• 找出 差異 (diff)。
• 只更新需要改變的部分到真實 DOM。

React 17 推出新版 JSX 轉換後， SWC 輸出的是 _jsx(...)，不再是 React.createElement(...)，這也是現在不用在每個檔案寫 import React 的原因。